<template>
  <div>
    <div class="GL" ref="GL"></div>
  </div>
</template>

<script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

export default {
  data() {
    return {
      scene: null,
      camera: null,
      renderer: null,
    }
  },
  methods: {
    init() {
      this.initScene()
      this.initCamera()
      this.initLight()
      this.initRenderer()
      this.initControls()
      this.update();
    },
    // 创建场景
    initScene() {
      this.scene = new THREE.Scene();
      this.scene.background = new THREE.Color(0x222222);
    },
    // 摄像机
    initCamera() {
      this.camera = new THREE.PerspectiveCamera(
        45,
        window.innerWidth / window.innerHeight,
        1,
        1000
      );
    },
    initLight() {
      // 环境光
      let light = new THREE.AmbientLight(0xfafafa, .5);
      this.scene.add(light);
    },
    // 渲染器
    initRenderer() {
      let gl = this.$refs.gl;
      this.renderer = new THREE.WebGLRenderer({
        antialias: true,
      });
      this.renderer.setPixelRatio(window.devicePixelRatio);
      this.renderer.setSize(window.innerWidth, window.innerHeight);
      gl.appendChild(this.renderer.domElement);
    },
    // 控制器
    initControls() {
      this.controls = new OrbitControls(this.camera, this.labelRenderer.domElement);
      this.controls.enableDamping = true;
      this.controls.dampingFactor = 0.25;
      this.controls.maxDistance = 800;
      this.controls.maxPolarAngle = Math.PI / 2;
      this.controls.minAzimuthAngle = Math.PI / 2;
    },
    // 渲染场景
    update() {
      requestAnimationFrame(this.update);
      this.renderer.render(this.scene, this.camera);
      this.controls.update();
    },
  }
}
</script>

<style>

</style>